<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>
			List contact
		</title>
		
		<link href="http://fonts.googleapis.com/css?family=Oswald|Droid+Sans:400,700" rel="stylesheet" />
		<!-- The Main CSS File -->
		<link rel="stylesheet" href="../CSS/style.css" />
		
		<link rel="stylesheet" href="../CSS/site.css" />
		<!-- jQuery -->
		<script src="../Javascript/jQuery/jquery-1.7.2.min.js"></script>
		<!-- Flot -->
		<script src="../Javascript/Flot/jquery.flot.js"></script>
		<script src="../Javascript/Flot/jquery.flot.resize.js"></script>
		<script src="../Javascript/Flot/jquery.flot.pie.js"></script>
		<!-- DataTables -->
		<script src="../Javascript/DataTables/jquery.dataTables.min.js"></script>
		<!-- ColResizable -->
		<script src="../Javascript/ColResizable/colResizable-1.3.js"></script>
		<!-- jQuryUI -->
		<script src="../Javascript/jQueryUI/jquery-ui-1.8.21.min.js"></script>
		<!-- Uniform -->
		<script src="../Javascript/Uniform/jquery.uniform.js"></script>
		<!-- Tipsy -->
		<script src="../Javascript/Tipsy/jquery.tipsy.js"></script>
		<!-- Elastic -->
		<script src="../Javascript/Elastic/jquery.elastic.js"></script>
		<!-- ColorPicker -->
		<script src="../Javascript/ColorPicker/colorpicker.js"></script>
		<!-- SuperTextarea -->
		<script src="../Javascript/SuperTextarea/jquery.supertextarea.min.js"></script>
		<!-- UISpinner -->
		<script src="../Javascript/UISpinner/ui.spinner.js"></script>
		<!-- MaskedInput -->
		<script src="../Javascript/MaskedInput/jquery.maskedinput-1.3.js"></script>
		<!-- ClEditor -->
		<script src="../Javascript/ClEditor/jquery.cleditor.js"></script>
		<!-- Full Calendar -->
		<script src="../Javascript/FullCalendar/fullcalendar.js"></script>
		<!-- Color Box -->
		<script src="../Javascript/ColorBox/jquery.colorbox.js"></script>
		<!-- Kanrisha Script -->
		<script src="../Javascript/kanrisha.js"></script>		
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div id="controls">
			<div>
				<div class="simple_buttons bdC">
					<div>Lookup</div>
				</div>
			</div>
			<div class="dialog bDialog" title="List Contacts" style="width: 150%">
				<div id="list_contact">
					<div class="widget_header wwOptions">
						<h4 class="widget_header_title wwIcon i_16_data">List Contacts</h4>							
					</div>
					<div class="widget_contents noPadding">
						<div class="dataTables_wrapper">
							<div class="dtTop">
							<div class="dtShowPer">
								<div class="dataTables_length">
									<label>
										Show contacts: 
										<div class="selector">
											<span style="-moz-user-select: none">10</span>
											<select name="DataTables_Table_0_length" size="1" style="opacity: 0;">
												<option value="10" selected="selected">10</option>
												<option value="25">25</option>
												<option value="50">50</option>
												<option value="100">100</option>
											</select>
										</div>
									</label>
								</div>
							</div>
							<div class="dtFilter">
								<div class="dataTables_filter">
									<div style="width: auto; margin-left: 15px; float: left;">
										First Name:
										<input class="simple_field" type="text"  style="width: 150px;"/>
									</div>
									
									<div style="width: auto; margin-left: 25px; float: right;">
										Surname:
										<input class="simple_field" type="text" style="width: 150px;" />
									</div>
									<div id="control_buttons" style="margin-left: 15px;">
										<input type="button" value="Search" class="simple_buttons" style="width: auto; margin-left: 15px; "/>
										<input type="button" value="Clear" class="simple_buttons" style="margin-left: 15px; width: auto;"/>
										<input type="button" value="None" class="simple_buttons" style="margin-left: 15px; "/>
										<input type="button" value="Create" class="simple_buttons" style="margin-left: 15px; "/>
									</div>
								</div>
							</div>
							
						</div>								
						<div class="dtTables">
							<table id="DataTables_Table_0" class="tables  noObOLine dataTable" aria-describedby="DataTables_Table_0_info">
								<thead>
									<tr id="head_table">
										<td></td>
										<td>Contact Name</td>
										<td>Mobile Phone</td>
										<td>Email</td>
										<td>Contact Type</td>
										<td>Is Active?</td>
										<td></td>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<input type="radio" name="contact_row" class="simple_form" />
										</td>
										<td>Nguyen Hoang Hai</td>
										<td>0975700915</td>
										<td>hainhh1@fsoft.com.vn</td>
										<td>True</td>
										<td></td>
										<td></td>
									</tr>
									<tr>
										<td>
											<input type="radio" name="contact_row" class="simple_form" />
										</td>
										<td>Vu Nhu Tien</td>
										<td>0988888787</td>
										<td>tiennv@fsoft.com.vn</td>
										<td>False</td>
										<td></td>
										<td></td>
									</tr>
									<tr>
										<td>
											<input type="radio" class="simple_form" name="contact_row" class="simple_field" />
										</td>
										<td>Nguyen Dai Quang</td>
										<td>0987654634</td>
										<td>quangnd6@fsoft.com.vn</td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
								</tbody>
							</table>
							
						</div>
						<div class="dtBottom">
							<div class="dtInfo">
								<div>Show 1 to 3 of 3 entries</div>
								<div id="control_buttons" >
									<input type="button" value="Select" class="simple_buttons" style="width: auto; margin-left: 15px; "/>
									<input type="button" value="Edit" class="simple_buttons bdC" style="margin-left: 15px; width: auto;"/>
									<input type="button" value="Close" class="simple_buttons" style="margin-left: 15px; "/>
									
							</div>
							</div>
							<div class="dtPagination">
								<div>
									<a>First</a>
									<a>Previous</a>
									<a>1</a>
									<a>2</a>
									<a>...</a>
									<a>10</a>
									<a>Next</a>
									<a>Last</a>
								</div>
								
							</div>
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>